<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" class="login-form"
             :rules="activeName=='tab1'?tab1LoginRules:tab2LoginRules">
      <h3 class="title">LINQ-BACK</h3>

      <el-tabs v-model="activeName" :stretch="true" @tab-click="handleTabClick">

        <!--   账号密码登录     -->
        <el-tab-pane label="账号密码登录" name="tab1">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                      @keyup.enter.native="handleLogin">
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
            </el-input>
          </el-form-item>
        </el-tab-pane>

        <!--手机号登录-->
        <el-tab-pane label="手机号登录" name="tab2">
          <el-form-item prop="phone">
            <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号">
              <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
            </el-input>
          </el-form-item>
          <el-row :gutter="16">
            <el-col :span="16">
              <el-form-item prop="code">
                <el-input v-model="loginForm.code" type="text" placeholder="验证码">
                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn"
                         @click.stop.prevent="getCaptcha"
                         v-text="!state.smsSendBtn && '获取验证码' || (state.timeout+' s')"/>
            </el-col>
          </el-row>
        </el-tab-pane>

      </el-tabs>

      <!--记住\忘记密码      -->
      <el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
        <router-link :to="{ name: 'recover', params: { user: 'aaa'} }" class="forget-password" style="float: right;">
          忘记密码
        </router-link>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button :loading="state.loginBtnLoading" size="large" type="primary" style="width:100%;"
                   @click.native.prevent="handleLogin">
          <span v-if="!state.loginBtnLoading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>

      <!--   其他登录方式   -->
      <el-form-item class="other-login">
        <span>其他登录方式</span>
        <!--        <a>-->
        <!--          <svg-icon slot="prefix" icon-class="qq" class="el-input__icon input-icon item-icon"/>-->
        <!--        </a>-->
        <a>
          <svg-icon slot="prefix" icon-class="zfb" class="el-input__icon input-icon item-icon"/>
        </a>
        <a>
          <svg-icon slot="prefix" icon-class="github" class="el-input__icon input-icon item-icon"/>
        </a>
        <a>
          <svg-icon slot="prefix" icon-class="gitee" class="el-input__icon input-icon item-icon"/>
        </a>
        <router-link class="register" :to="{name:'register'}">注册账户</router-link>
      </el-form-item>
    </el-form>

    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2021-2099 linq.cool All Rights Reserved.</span>
    </div>

    <!-- 滑块验证码   -->
    <verify @success="captchaCheckSuccess" :mode="'pop'" :captchaType="'blockPuzzle'"
            :imgSize="{ width: '330px', height: '155px' }"
            ref="verify"/>

  </div>
</template>

<script>
import Verify from '@c/verifition/Verify'
import Cookies from 'js-cookie'
import { encrypt } from '@u/jsencrypt'

export default {
  name: 'Login',
  components: {
    Verify
  },
  data () {
    return {
      // 滑块检验
      captchaCheck: false,
      // 滑块校验码
      captchaVerification: '',
      // 验证码发送状态
      state: {
        timeout: 60,
        loginBtnLoading: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        smsSendBtn: false
      },
      // 激活tab
      activeName: 'tab1',
      cookiePassword: '',
      loginForm: {
        // username: 'admin',// admin
        // password: 'admin123',// admin123
        // rememberMe: false,
        // phone: '',
        // code: ''
      },
      // 账号密码tab 校验
      tab1LoginRules: {
        username: [
          { required: true, trigger: 'change', message: '用户名不能为空' }
        ],
        password: [
          { required: true, trigger: 'change', message: '密码不能为空' }
        ],
      },
      // 手机号tab校验
      tab2LoginRules: {
        phone: [
          { require: true, trigger: 'change', message: '手机号不合法', pattern: /^1[34578]\d{9}$/ },
          { required: true, trigger: 'change', message: '手机号不能为空' }
        ],
        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      redirect: undefined
    }
  },
  created () {
    // mock
    this.loginForm.username = 'admin'
    this.loginForm.password = '111222'
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    // 处理tab切换
    handleTabClick () {
      // 清空表单
      this.resetForm('loginForm')
    },
    // 滑块验证码校验成功回调
    captchaCheckSuccess (data) {
      this.captchaCheck = true
      this.captchaVerification = data.captchaVerification
      this.handleLogin()
    },
    // 获取验证码
    getCaptcha () {

    },
    // 处理确认登录
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.state.loginBtnLoading = true
            setTimeout(() => {
              this.state.loginBtnLoading = false
            }, 3000)
            if (!this.captchaCheck) {
              this.$refs.verify.show()
              return false
            }
            if (this.activeName == 'tab1') {
              // console.log('账号密码登录')
              if (this.loginForm.rememberMe) {
                Cookies.set('username', this.loginForm.username, { expires: 30 })
                Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
                Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
              } else {
                Cookies.remove('username')
                Cookies.remove('password')
                Cookies.remove('rememberMe')
              }
              this.loginForm.captchaVO = { captchaVerification: this.captchaVerification }
              // const usernameLoginForm = {
              //   username: this.loginForm.username,
              //   password: this.loginForm.password,
              //   captchaVO: captchaVO
              // }
              // console.log(this.loginForm)
              this.$store.dispatch('LoginSlide', this.loginForm).then(() => {
                this.$router.push({ path: this.redirect || '/' }).catch(() => {
                })
              }).catch(() => {
                this.captchaCheck = false
                this.$refs.verify.refresh()
              })
            }
            if (this.activeName == 'tab2') {
              console.log('手机号登录')
            }


          }
        }
      )
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-bg.jpg");
  background-size: cover;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.getCaptcha {
  display: block;
  width: 100%;
  height: 40px;
}

.forget-password {
  font-size: 14px;
  color: rgb(29, 142, 250);
}

.forget-password:hover {
  color: rgb(46, 195, 251);
}

.other-login {
  text-align: left;
  margin-top: 24px;
  line-height: 22px;

  .item-icon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.2);
    margin-left: 16px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #1890ff;
    }
  }

  .register {
    float: right;
    color: rgb(29, 142, 250);
  }

  .register:hover {
    color: rgb(46, 195, 251);
  }
}
</style>
